<template>
    <div>
        <div class="header">
            <div @click="getOrdernum">
                <img :src="this.icon.icon1">
                <p class="p1">
                    <span>上周订单数</span>
                    <span class="cash">{{this.lastOrder}}</span>
                </p>
            </div>
            <div>
                <img :src="this.icon.icon2">
                <p class="p1">
                    <span>上周会员新增数</span>
                    <span class="cash">{{this.lastUser}}</span>
                </p>
            </div>
             <div>
                <img :src="this.icon.icon4">
                <p class="p1">
                    <span>上周订单额</span>
                    <span class="cash">{{this.lastCash}}</span>
                </p>
            </div>
             <div>
                <img :src="this.icon.icon3">
                <p class="p1">
                    <span>上周活动成单率</span>
                    <span class="cash">{{this.lastSucce}}</span>
                </p>
            </div>
        </div>

        <div class="container" >
            <bar-graph :bardata="tempdata1"></bar-graph>
        </div>

        <div class="container1">
            <pie-graph></pie-graph>
        </div>
    </div>
</template>
<script>
// 引入两个子组件
 import BarGraph from "./component/bargraph";
 import PieGraph from "./component/piegraph";
export default {
     name:'dashboard',
     components:{
        BarGraph,
        PieGraph,
    },
    data(){
        return{
            icon:{
              icon1:require("./../../assets/img/order-1.png"),
              icon2:require("./../../assets/img/order-2.png"),
              icon3:require("./../../assets/img/order-3.png"), 
              icon4:require("./../../assets/img/order.png")
            },
            // ---------------------------------------------总览数据实体类
            lastOrder : 0,
            lastUser : 0,
            lastCash : 0,
            lastSucce : 0,
            // ---------------------------------------------总览数据实体类
             // ---------------------------------------------临时定义显示的数据
            lastOrderNew : 0,
            lastUserNew : 300,
            lastCashNew : 0,
            lastSucceNew : 1250,
            // ---------------------------------------------临时定义显示的数据
            // ---------------------------------------------临时定义传给子组件的数据
            tempdata1:[]
            // ---------------------------------------------临时定义传给子组件的数据
        }

    },
    mounted(){
        this.getorder();
    },
    methods:{
        init(){
            //对于显示的数据做个动画
           this.timer();
           this.timer1();
           this.timer2();
           this.timer3();
        },
        timer(){
            if(!this.lastOrderNew) return;
            let timer = setInterval(() => {
                    this.lastOrder = this.lastOrder + 1;
                    if( this.lastOrder ===  this.lastOrderNew){
                    clearInterval(timer);
                    }
            }, 0.01);
        },
        timer1(){
            if(!this.lastUserNew) return;
            let timer1 = setInterval(() => {
                this.lastUser = this.lastUser + 1;
                if( this.lastUser ===  this.lastUserNew){
                    clearInterval(timer1);
                }
            }, 0.01);
        },
        timer2(){
            if(!this.lastCashNew) return
            let timer2 = setInterval(() => {
                this.lastCash = this.lastCash + 1;
                if( this.lastCash ===  this.lastCashNew){
                    clearInterval(timer2);
                }
            }, 0.01);
        },
        timer3(){
             if(!this.lastSucceNew) return
            let timer3 = setInterval(() => {
                this.lastSucce = this.lastSucce + 1;
                if( this.lastSucce ===  this.lastSucceNew ){
                    clearInterval(timer3);
                }
            }, 1);
        },
        getorder(){
            this.$http({
                method:"post",
                url:this.$util.baseUrl+'users/getorderlist',
            }).then((res)=>{
                 if(res.data.code == "800000"){
                     let tempdata = []
                     let total = 0
                     for(let key in res.data.data.responsedata){
                        if(res.data.data.responsedata[key][0].average===null){
                            res.data.data.responsedata[key][0].average = 0
                        }
                        tempdata.push(res.data.data.responsedata[key][0].average)
                        total = total + res.data.data.responsedata[key][0].average
                     }
                    this.tempdata1 = tempdata;   //数据给临时数组
                    this.lastCashNew = total;
                    this.lastOrderNew = res.data.data.responsenum[0].num
                    this.init();
                 }
            }) 
        },
        getOrdernum(){
            
        }
    }
}
</script>
<style lang="less" scoped>
    .header{
        width: 100%;
        height: 200px;
        background: #eee;
        display: flex;
        justify-content: space-around;
        align-items: center;
        div{
            height: 108px;
            width: 300px;
            cursor: pointer;
            font-size: 12px;
            overflow: hidden;
            color: #666;
            background: #fff;
            border: 1px solid #eee;
            border-radius: 10px;
            box-shadow: 4px 4px 40px rgba(0,0,0,.05);
            border-color: rgba(0,0,0,.05);
            display: flex;
            justify-content: space-around;
            align-items: center;
            img{
                width: 80px;
                height: 80px;
            }
            p{
                display: flex;
                justify-content: space-around;
                align-items: center;
                flex-direction: column;
                span:first-child{
                    line-height: 18px;
                    color: rgba(0,0,0,.45);
                    font-size: 20px;
                    margin-bottom: 12px;
                }
                .cash{
                    font-size: 30px;
                    font-weight: 700;
                }
            }
        }
    }
</style>